<template>
  <view class="indexMain">
    <view class="indexBox">
      <!-- banner -->
      <!-- <view class="indexBannerMain">
        <view class="indexBannerBox">
          <u-swiper
            :list="bannerList"
            height="365"
            :border-radius="0"
          ></u-swiper>
        </view>
      </view> -->
      <!-- 收益统计 -->
      <view class="indexIncomeMain">
        <view class="headerBtnBox flex align-center justify-between">
          <view class="titleContet">
            <text>盛秘书</text>
            <text>您的贴身小管家</text>
          </view>
          <view class="imageBox">
            <image
              src="../../static/images/icon_cs.png"
              mode="widthFix"
              @click="serviceContentTap"
            ></image>
            <image
              src="../../static/images/icon_news.png"
              mode="widthFix"
              @click="$u.route('/pages/notice/list')"
            ></image>
          </view>
        </view>
        <view class="indexIncomeBox">
          <view class="top">
            <view class="left">
              <text>累计收益 (元)</text>
              <text>{{
                incomeData.total_income
                  ? $tools.format(incomeData.total_income)
                  : "0.00"
              }}</text>
            </view>
            <view
              class="right flex align-center"
              @click="jumpTap('/pages/wallet/walletDetail')"
            >
              钱包明细<image
                src="../../static/images/btn_right.png"
                mode="widthFix"
              ></image>
            </view>
          </view>
          <view class="sub flex align-center justify-around">
            <view class="item">
              <text>今日收益 (元)</text>
              <text>{{
                incomeData.today_income
                  ? $tools.format(incomeData.today_income)
                  : "0.00"
              }}</text>
            </view>
            <view class="item">
              <text>本月收益 (元)</text>
              <text>{{
                incomeData.month_income
                  ? $tools.format(incomeData.month_income)
                  : "0.00"
              }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- indexMenu -->
      <view class="indexMenuMain">
        <view class="indexMenuBox clearfix">
          <!-- <view
            class="indexMenuItem"
            @click="jumpTap('/pages/zcSetting/zcSetting')"
          >
            <image
              src="../../static/images/menu/zcszIcon.png"
              mode="widthFix"
            ></image>
            <view class="tip">代理</view>
            <text>政策设置</text>
          </view> -->
          <view class="indexMenuItem" @click="jumpTap('/pages/myTeam/myTeam')">
            <image
              src="../../static/images/menu/wdtdIcon.png"
              mode="widthFix"
            ></image>
            <text>团队政策</text>
          </view>
          <view class="indexMenuItem" @click="jumpTap('/pages/zdzc/zdzc1')">
            <image
              src="../../static/images/menu/bzzy.png"
              mode="widthFix"
            ></image>
            <!-- <view class="tip">机具</view> -->
            <text>机具设置</text>
          </view>
          <view
            class="indexMenuItem"
            @click="jumpTap('/pages/myMerchant/myMerchant')"
          >
            <image
              src="../../static/images/menu/wdshIcon.png"
              mode="widthFix"
            ></image>
            <text>我的商户</text>
          </view>

          <view
            class="indexMenuItem"
            @click="jumpTap('/pages/tradeManage/index')"
          >
            <image
              src="../../static/images/menu/wdjy.png"
              mode="widthFix"
            ></image>
            <text>交易管理</text>
          </view>
          <view
            class="indexMenuItem"
            @click="jumpTap('/pages/inventoryManagement/index')"
          >
            <image
              src="../../static/images/menu/kcglIcon.png"
              mode="widthFix"
            ></image>
            <text>终端管理</text>
          </view>

          <view class="indexMenuItem" @click="jumpTap('/pages/jjhb/index')">
            <image
              src="../../static/images/menu/jjhbIcon.png"
              mode="widthFix"
            ></image>
            <text>机具调拨</text>
          </view>
          <view class="indexMenuItem" @click="jumpTap('/pages/share/share')">
            <image
              src="../../static/images/menu/fzdlIcon.png"
              mode="widthFix"
            ></image>
            <text>发展代理</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 数据统计 -->
    <view class="dataPart">
      <view class="dataBox">
        <view class="topText">
          <image src="../../static/images/icon_db.png" mode="widthFix"></image>
          <text>交易数据</text>
        </view>
        <view class="chooseItem">
          <view
            :class="dataShowOne == 1 ? '' : 'unActive'"
            @click="dataOneChange(1)"
            >自营交易</view
          >
          <view
            :class="dataShowOne == 2 ? '' : 'unActive'"
            @click="dataOneChange(2)"
            >团队交易</view
          >
        </view>
        <view class="dataShow" v-if="dataShowOne == 1">
          <view class="flex align-center">
            <view>今日交易 (元)</view>
            <view>{{
              userStat.day_trade != "0" && userStat.day_trade != null
                ? $tools.format(userStat.day_trade)
                : "0.00"
            }}</view>
          </view>
          <view class="flex align-center">
            <view>本月交易 (元)</view>
            <view>{{
              userStat.month_trade != "0" && userStat.month_trade != null
                ? $tools.format(userStat.month_trade)
                : "0.00"
            }}</view>
          </view>
        </view>
        <view class="dataShow" v-if="dataShowOne == 2">
          <view class="flex align-center">
            <view>今日交易 (元)</view>
            <view>{{
              groupStat.day_trade != "0" && groupStat.day_trade != null
                ? $tools.format(groupStat.day_trade)
                : "0.00"
            }}</view>
          </view>
          <view class="flex align-center">
            <view>本月交易 (元)</view>
            <view>{{
              groupStat.month_trade != "0" && groupStat.month_trade != null
                ? $tools.format(groupStat.month_trade)
                : "0.00"
            }}</view>
          </view>
        </view>
        <view class="totleData flex align-center" v-if="dataShowOne == 1">
          累计交易 (元) ：
          <text>{{
            userStat.total_trade !== "0" && userStat.total_trade != null
              ? $tools.format(userStat.total_trade)
              : "0.00"
          }}</text>
        </view>
        <view class="totleData flex align-center" v-if="dataShowOne == 2">
          累计交易 (元) ：
          <text>{{
            groupStat.total_trade !== "0" && groupStat.total_trade != null
              ? $tools.format(groupStat.total_trade)
              : "0.00"
          }}</text>
        </view>
      </view>
    </view>

    <view class="dataPart">
      <view class="dataBox">
        <view class="topText">
          <image src="../../static/images/icon_db.png" mode="widthFix"></image>
          <text>激活数据</text>
        </view>
        <view class="chooseItem">
          <view
            :class="dataShowTwo == 1 ? '' : 'unActive'"
            @click="dataTwoChange(1)"
            >自营激活</view
          >
          <view
            :class="dataShowTwo == 2 ? '' : 'unActive'"
            @click="dataTwoChange(2)"
            >团队激活</view
          >
        </view>
        <view class="dataShow" v-if="dataShowTwo == 1">
          <view class="flex align-center">
            <view>今日激活 (台)</view>
            <view>{{
              userActiveStar.todayActive
                ? $tools.format(userActiveStar.todayActive)
                : "0"
            }}</view>
          </view>
          <view class="flex align-center">
            <view>本月激活 (台)</view>
            <view>{{
              userActiveStar.monthActive
                ? $tools.format(userActiveStar.monthActive)
                : "0"
            }}</view>
          </view>
          <view class="flex align-center">
            <view>累计激活 (台)</view>
            <view>{{
              userActiveStar.totalActive
                ? $tools.format(userActiveStar.totalActive)
                : "0"
            }}</view>
          </view>
        </view>
        <view class="dataShow" v-if="dataShowTwo == 2">
          <view class="flex align-center">
            <view>今日激活 (台)</view>
            <view>{{
              groupActiveStar.todayActive
                ? $tools.format(groupActiveStar.todayActive)
                : "0"
            }}</view>
          </view>
          <view class="flex align-center">
            <view>本月激活 (台)</view>
            <view>{{
              groupActiveStar.monthActive
                ? $tools.format(groupActiveStar.monthActive)
                : "0"
            }}</view>
          </view>
          <view class="flex align-center">
            <view>累计激活 (台)</view>
            <view>{{
              groupActiveStar.totalActive
                ? $tools.format(groupActiveStar.totalActive)
                : "0"
            }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 升级 开始 -->
    <view class="upgradeBody" v-if="appVersionInfo.status == 1">
      <view class="upgradeMain">
        <u-icon
          class="uIcon"
          name="close-circle"
          color="#fff"
          size="58"
          v-if="!appVersionInfo.forceUpdate"
          @click="appVersionInfo.status = 0"
        ></u-icon>
        <view class="h3">发现新版本：v{{ appVersionInfo.versionName }}</view>
        <view class="brief">
          <text class="title">更新内容</text>
          <text>{{ appVersionInfo.versionInfo }}</text>
          <text class="title">更新时间</text>
          <text>{{ appVersionInfo.updateTime }}</text>
		  <text class="title" v-if="equipmentType == 'ios'">请前往苹果商店更新</text>
        </view>
       <button @click="copyTap" v-if="equipmentType == 'android'">复制下载链接</button>
       <button @click="appVersionInfo.status = 1" v-if="equipmentType == 'ios'">确认</button>
         <!-- <button @click="goToDownLoad" v-if="equipmentType == 'android'">立即更新</button> -->
      </view>
    </view>
    <!-- 升级 结束 -->
    <!-- 底部菜单 -->
    <u-tabbar
      :list="tabBarList"
      :mid-button="false"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      :border-top="borderTop"
      mid-button-size="76"
      icon-size="40"
      height="105rpx"
    ></u-tabbar>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      tabBarList: [],
      borderTop: true,
      inactiveColor: "#909399",
      activeColor: "#fb4535",
      appVersionInfo: {},
      company: "元",
      userInfo: {
        user_type: "",
      },
      incomeData: {
        month_income: 0,
        today_income: 0,
        total_income: 0,
      },

      dataShowOne: 1,
      userStat: {
        day_trade: 0,
        month_trade: 0,
        total_trade: 0,
      },
      groupStat: {
        day_trade: 0,
        month_trade: 0,
        total_trade: 0,
      },

      dataShowTwo: 1,
      userActiveStar: {
        monthActive: 0,
        todayActive: 0,
        totalActive: 0,
      },
      groupActiveStar: {
        monthActive: 0,
        todayActive: 0,
        totalActive: 0,
      },

      tradeCurrent: 0,
      tradeSwiperCurrent: 0,
      activeCurrent: 0,
      activeSwiperCurrent: 0,
	  // 设备类型
	  equipmentType:'android'
    };
  },
  onLoad() {
    this.tabBarList = this.$tabbar.tabbar;
	this.equipmentType = this.$store.state.type;
    this.checkAppVersion();

	// function Person(){
	// 	console.log(Person.prototype.__proto__)
	// 	console.log(Object)
	// }
	// let person1 = new Person()
  },
  onShow() {
    this.initUserInfo();
    this.getUserIncome();
    this.getUserStatIndex();
    this.getGroupStatIndex();
    this.getUserActiveStat();
    this.getGroupActiveStat();
  },
  onPullDownRefresh() {
    this.initUserInfo();
    this.getUserIncome();
    this.getUserStatIndex();
    this.getGroupStatIndex();
    this.getUserActiveStat();
    this.getGroupActiveStat();
  },
  methods: {
    goToDownLoad() {
      window.location.href = this.appVersionInfo.downloadUrl;
      // window.postMessage(this.appVersionInfo.downloadUrl);
    },
    // 页面初始化
    initUserInfo() {
	let third_session = uni.getStorageSync("loginInfo").third_session;
      this.$u.api.initUserInfo({
		  third_session
	  }).then((res) => {
          // let month = res.result.month_trade;
          // month = month.replace(/,/g, "");
          // if (month > 10000) {
          //   this.company = "万元";
          // } else {
          //   this.company = "元";
          // }
          // month = month > 10000 ? month / 10000 : month;
          if (res.status == 200) {
            this.userInfo = res.result;
            uni.setStorageSync("userInfo", res.result);
            // this.keepTwoDecimalFull(month);
          }
          uni.stopPullDownRefresh();
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
        });
    },
    //获取个人收益
    getUserIncome() {
      this.$u.api
        .getUserIncome()
        .then((res) => {
          if (res.status == 200) {
            if (res.result) {
              this.incomeData = res.result;
            }
          }
          uni.stopPullDownRefresh();
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
        });
    },

    // 数据板块1切换
    dataOneChange(num) {
      this.dataShowOne = num;
      if (this.dataShowOne == 1) {
        this.getUserStatIndex();
      } else {
        this.getGroupStatIndex();
      }
    },
    //获取自营交易统计数据
    getUserStatIndex() {
      this.$u.api
        .getUserStatIndex()
        .then((res) => {
          if (res.status == 200) {
            this.userStat = res.result;
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
        });
    },
    //获取团队交易统计数据
    getGroupStatIndex() {
      this.$u.api
        .getGroupStatIndex()
        .then((res) => {
          if (res.status == 200) {
            this.groupStat = res.result;
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
        });
    },

    // 数据板块2切换
    dataTwoChange(num) {
      this.dataShowTwo = num;
      if (this.dataShowTwo == 1) {
        this.getUserActiveStat();
      } else {
        this.getGroupActiveStat();
      }
    },

    //获取个人激活统计数据
    getUserActiveStat() {
      this.$u.api
        .getUserActiveStat()
        .then((res) => {
          if (res.status == 200) {
            this.userActiveStar = res.result;
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
        });
    },
    //获取团队激活统计数据
    getGroupActiveStat() {
      this.$u.api
        .getGroupActiveStat()
        .then((res) => {
          if (res.status == 200) {
            this.groupActiveStar = res.result;
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
        });
    },
    // 客服入口跳转
    serviceContentTap() {
      let mobile = uni.getStorageSync("loginInfo").account;
      let customer = {
        姓名: uni.getStorageSync("loginInfo").real_name
          ? uni.getStorageSync("loginInfo").real_name
          : "盛秘书",
        手机: mobile,
        来源: "盛秘书", // 来源请写自己APP名称
      };
      customer = JSON.stringify(customer);
      let url = encodeURIComponent(
        "http://chat.ahcdialogchat.com/chat/h5/chatLink.html?channelId=3L0fbR&history=true&customer=" +
          customer +
          "&uniqueId=" +
          mobile
      );
      uni.navigateTo({
        url: "/pages/serviceCenter/serviceCenter?url=" + url,
      });
    },
    //5.四舍五入保留2位小数（不够位数，则用0替补）
    keepTwoDecimalFull(num) {
      var result = parseFloat(num);
      if (isNaN(result)) {
        alert("传递参数错误，请检查！");
        return false;
      }
      result = Math.round(num * 100) / 100;
      var s_x = result.toString(); //将数字转换为字符串

      var pos_decimal = s_x.indexOf("."); //小数点的索引值

      // 当整数时，pos_decimal=-1 自动补0
      if (pos_decimal < 0) {
        pos_decimal = s_x.length;
        s_x += ".";
      }

      // 当数字的长度< 小数点索引+2时，补0
      while (s_x.length <= pos_decimal + 2) {
        s_x += "0";
      }
      this.userInfo.month_trade = s_x;
      return s_x;
    },
    //页面跳转
    jumpTap(url, type = "navigateTo") {
      let isAuth = uni.getStorageSync("loginInfo").isCert;
      if (isAuth == 1) {
        this.$u.route({
          url: url,
          type: type,
        });
      } else {
        this.$refs.uToast.show({
          title: "请先进行实名认证",
          type: "error",
          url: "/pages/wd/authName",
        });
      }
    },
    //检测应用版本信息
    checkAppVersion() {
      this.$u.api
        .checkAppVersion({
          appId: this.$store.state.appid,
          versionName: this.$store.state.version,
          // type: uni.getSystemInfoSync().platform,
          type: this.equipmentType,
          envType: this.$store.state.envType,
        })
        .then((res) => {
          if (res.status == 200) {
            this.appVersionInfo = res.result;
          }
        });
    },
    //复制下载链接
    copyTap() {
      let downloadUrl = this.appVersionInfo.downloadUrl;
      uni.setClipboardData({
        data: downloadUrl,
        success: function (res) {
          uni.getClipboardData({
            success: function (res) {
              uni.showToast({
                title: "复制成功,请打开浏览器下载",
                duration: 3000,
              });
            },
          });
        },
      });
    },
    //更新APP
    // uploadApp() {
    //   let appVersionInfo = this.appVersionInfo;
    //   window.postMessage(JSON.stringify(appVersionInfo));
    //   //appVersionInfo =  {
    //   //   downloadUrl:"https://posimg.shengpay.com/apos-zy-client-hh/s/android/SenPos-Agent-prod-v1.0.0.apk",
    //   //   forceUpdate:true,
    //   //   status:1,
    //   //   updateTime:"2021-08-05 10:10:10",
    //   //   versionInfo:"初始版本",
    //   //   versionName:"1.0.0"
    //   // }
    // },
  },
};
</script>
<style lang="scss">
page {
  background: #fff;
}

.indexBox {
  background: #fff url("../../static/images/indexHeaderBg.jpg") no-repeat;
  background-size: 100% auto;
}

.indexBannerBtnMain {
  padding: 0 24rpx;
  box-shadow: 0 0 10rpx #eee;

  .indexBannerBtnBox {
    padding: 24rpx 10rpx;

    image {
      width: 100%;
      vertical-align: middle;
    }
  }
}

.indexNoticeMain {
  box-shadow: 0 0 10rpx #eee;
}

.indexMenuMain {
  padding: 20rpx 29rpx 40rpx;

  .indexMenuBox {
    padding: 0;

    .indexMenuItem {
      width: 25%;
      float: left;
      text-align: center;
      position: relative;

      .tip {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        font-size: 24rpx;
        background: #fb4535;
        color: #fff;
        width: 76rpx;
        height: 36rpx;
        line-height: 36rpx;
        border-radius: 60rpx;
        transform: scale(0.8);
      }

      image {
        width: 93rpx;
        height: 93rpx;
        vertical-align: middle;
        margin-top: 30rpx;
      }

      text {
        font-size: 26rpx;
        color: #000;
        display: block;
        line-height: 70rpx;
      }
    }
  }
}

.indexIncomeMain {
  padding: 60rpx 30rpx 0;
  position: relative;

  .headerBtnBox {
    color: #fff;
    width: 100%;
    letter-spacing: 3rpx;
    padding-bottom: 50rpx;
    .titleContet {
      text {
        display: block;
      }
      & text:first-child {
        font-size: 60rpx;
      }

      & text:last-child {
        font-size: 26rpx;
        margin-top: 4rpx;
      }
    }

    .imageBox {
      margin-left: 90rpx;

      image {
        width: 48rpx;
        height: 48rpx;
      }

      & image:first-child {
        margin-right: 30rpx;
      }
    }
  }

  .indexIncomeBox {
    position: relative;
    background: #fff;
    border-radius: 10rpx;
    box-shadow: 0 6rpx 30rpx #fdccc9;
    padding-bottom: 30rpx;
    text-align: center;
    color: #000;

    .left {
      padding-top: 48rpx;

      text {
        display: block;

        &:nth-of-type(1) {
          font-size: 26rpx;
          font-weight: 700;
          letter-spacing: 2rpx;
        }

        &:nth-of-type(2) {
          font-size: 60rpx;
          font-family: "numberFont";
          color: #fb4635;
          padding-top: 6rpx;
        }
      }
    }

    .right {
      position: absolute;
      right: 0;
      top: 38rpx;
      padding: 10rpx 0rpx 10rpx 24rpx;
      text-align: center;
      font-size: 26rpx;
      color: #fff;
      background-image: linear-gradient(to right, #ff7366 0%, #fb4535 100%);
      border-top-left-radius: 40rpx;
      border-bottom-left-radius: 40rpx;

      image {
        width: 11rpx;
        height: 11rpx;
        margin: 0 16rpx 0 11rpx;
      }
    }

    .sub {
      padding-top: 36rpx;

      .item {
        position: relative;
        width: 100%;
        // &:nth-of-type(1)::before {
        // 	content: "";
        // 	display: block;
        // 	width: 2rpx;
        // 	height: 60rpx;
        // 	background: #e0e0e0;
        // 	position: absolute;
        // 	right: -1rpx;
        // 	top: 50%;
        // 	margin-top: -30rpx;
        // }

        text {
          display: block;
          text-align: center;

          &:nth-of-type(1) {
            font-size: 26rpx;
            color: #666;
          }

          &:nth-of-type(2) {
            font-size: 40rpx;
            color: #000;
            letter-spacing: 2rpx;
            font-family: "numberFont";
            padding-top: 10rpx;
          }
        }
      }
    }
  }
}

.dataPart {
  padding: 0 30rpx 30rpx;

  .dataBox {
    background-color: #fff;
    box-shadow: 0rpx 0rpx 8rpx #dedede;
    border-radius: 10rpx;

    .topText {
      padding: 40rpx 0 34rpx 30rpx;

      image {
        width: 28rpx;
        height: 28rpx;
      }

      text {
        padding-left: 16rpx;
        font-size: 34rpx;
        color: #000;
        font-weight: 700;
        letter-spacing: 2rpx;
      }
    }

    .chooseItem {
      padding-left: 30rpx;

      view {
        float: left;
        border: 1rpx solid #fb4535;
        padding: 8rpx 16rpx;
        border-radius: 30rpx;
        font-size: 24rpx;
        color: #fff;
        background-color: #fb4535;
        transition: 0.3s;
      }

      & view:last-child {
        margin-left: 30rpx;
      }

      .unActive {
        color: #999;
        background-color: #fff;
        border: 1rpx solid #999;
        transition: 0.3s;
      }
    }

    .dataShow {
      margin-top: 94rpx;
      display: flex;
      justify-content: space-around;

      & > view {
        width: 50%;
        flex-direction: column;
        text-align: center;
        height: 112rpx;

        & view:first-child {
          font-size: 24rpx;
          color: #999;
        }

        & view:last-child {
          font-family: numberFont;
          font-size: 40rpx;
          color: #000;
          font-weight: bold;
          letter-spacing: 3rpx;
          padding-top: 14rpx;
        }
      }
    }
  }

  .totleData {
    margin-top: 14rpx;
    border-top: 1rpx solid #eee;
    height: 87rpx;
    padding-left: 30rpx;
    font-size: 24rpx;
    color: #000000;
    letter-spacing: 1rpx;

    text {
      font-size: 40rpx;
      font-family: numberFont;
      color: #fb4535;
    }
  }
}
.upgradeBody {
  position: fixed;
  left: 0;
  // top: 88rpx;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .upgradeMain {
    width: 500rpx;
    height: 680rpx;
    background: url("../../static/images/upGradeBg.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 40%;
    margin-left: -250rpx;
    margin-top: -310rpx;
    border-radius: 15rpx;
    overflow: hidden;
    .uIcon {
      position: absolute;
      top: 10rpx;
      right: 0;
    }
    .h3 {
      padding-top: 240rpx;
      line-height: 40rpx;
      padding-left: 64rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    .brief {
      padding: 10rpx 64rpx 30rpx;
      text {
        display: block;
        line-height: 36rpx;
        font-size: 28rpx;
        &.title {
          font-weight: bold;
          margin-top: 15rpx;
        }
      }
    }
    button {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 75rpx;
      line-height: 70rpx;
      font-size: 32rpx;
      color: #fff;
      background: #fb4838;
      border-radius: 0;
      &::after {
        border: none;
      }
    }
  }
}
</style>
